<template>
  <el-card class="box-card">
    <div class="search-header">
      <span>线上热门搜索</span>
      <el-dropdown>
        <span>
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="search-main">
      <el-row :gutter="10">
        <el-col :span="12">
          <LineChart title="搜索用户数" count="14280" number="3.5%"></LineChart>
        </el-col>
        <el-col :span="12">
          <LineChart title="人均搜索次数" count="2.3" number="0.8%"></LineChart>
        </el-col>
      </el-row>
      <!-- table表格 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="排名" width="80" type="index">
        </el-table-column>
        <el-table-column label="搜索关键字" width="180" prop="word">
        </el-table-column>
        <el-table-column label="用户量" sortable prop="user"> </el-table-column>
        <el-table-column label="周涨幅" sortable prop="count">
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import LineChart from "@/views/dashboard/Footer/Search/LineChart";
export default {
  components: {
    LineChart,
  },
  data() {
    return {
      tableData: [
        {
          word: "上海",
          count: 8101,
          user: 6660,
        },
        {
          word: "广州",
          count: 7814,
          user: 2196,
        },
        { word: "北京", count: 3440, user: 1626 },
        {
          word: "深圳",
          count: 8388,
          user: 7102,
        },
      ],
    };
  },
};
</script>

<style scoped>
.search-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
</style>